<template>
	<div class="cfilm">
		<!-- 返回栏 -->
		<van-nav-bar left-arrow>
			<template #left>
				<span class="iconfont" @click="onClickLeft">&#xe660;</span>
			</template>
		</van-nav-bar>
		<!-- 标题 -->
		<div class="cf-title">
			{{items.name}}
		</div>
		<!-- 标签栏 -->
		<div class="cf-tars">
			<span v-for="(v,i) in items.services" :key="i">{{v.name}}</span>

			<span class="iconfont">&#xe61c;</span>
		</div>
		<!-- 地址 -->
		<div class="cf-address">
			<!-- 地址 -->
			<div class="cfress">
				<span class="iconfont">&#xe64e;</span>
				{{items.address}}
			</div>
			<!-- 电话 -->
			<div class="cfphone">
				<a :href="'tel://'+items.phone">
					<span class="iconfont">&#xe61b;</span>
				</a>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="cf-swiper">
			<!-- Swiper -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(v,i) in filmSchedules" :key="i" @click="onSlide(i)">
						<img :src="v.poster">
					</div>
				</div>
			</div>
			<!-- 模糊图背景 -->
			<div class="bg" :style="{background: 'url('+bgRrl+')'}">

			</div>
		</div>
		<!-- 电影详情 -->
		<div class="film-into" v-if="filmSchedules[swindex]">
			<!-- 左边电影介绍 -->
			<div class="fi-left">
				<div class="fil-title">
					{{filmSchedules[swindex].name}}
					<span>{{filmSchedules[swindex].grade}}分</span>
				</div>
				<div class="fil-type" >
					{{filmSchedules[swindex].director}} | {{filmSchedules[swindex].runtime}}分钟 | 
					<template v-for="(v,i) in filmSchedules[swindex].actors">
						{{v.name}} {{filmSchedules[swindex].actors.length-1==i?"":'|'}}
					</template>
				</div>
			</div>
			<!-- 右边跳转电影详情 -->
			<div class="fir-film">
				<span class="iconfont" @click="goFilm(filmSchedules[swindex].filmId)">&#xe61c;</span>
			</div>
		</div>
		<!-- 影院排片 -->
		<van-tabs v-if="filmSchedules[swindex]" @change="tabsChange" v-model="activeName" >
		  <van-tab v-for="(v,i) in filmSchedules[swindex].showDate" :title="dateMDFormat(v)" :name='v'>
		   <router-view/>
		  </van-tab>
		</van-tabs>
	</div>
</template>

<script>
	// 导入swiper对象
	import Swiper from 'swiper'
	// 导入swiper的css
	import 'swiper/dist/css/swiper.css'
	//导入时间库
	import timeFormats from '@/utility/formatTime'
	export default {
		/* 路由守卫 */
		beforeRouteUpdate(to,from,next) {
			next()
		},
		beforeRouteLeave(to,from,next) {
			next()
		}
		,
		data() {
			return {
				// 影院信息
				items: {},
				// 排片信息
				filmSchedules: [],
				// 模糊图片背景
				bgRrl: '',
				mySwiper: null,
				swindex: 0  ,//轮播图默认位置
				activeName:0
			}
		},
		// 监视数据
		watch:{
			// 监听轮播图下标
			swindex:function(newval,oldval){
				// 响应轮播图
				this.mySwiper.slideTo(this.swindex)
				//获取电影id
				let filmId = this.filmSchedules[this.swindex].filmId;
				//获取时间id
				let date = this.filmSchedules[this.swindex].showDate[0]
				// 判断地址是否存在时间id 
				if(this.$route.params.date){
					// 覆盖 --注意路由返回的至类型是字符串，而tar绑定的是数字类型
					date = Number(this.$route.params.date) ;
					// 更改tar选择状态
					this.activeName = date
				}
				// 跳转至影院排场子路由
				this.$router.replace({name:'cpfilm',params:{
					filmId:filmId,
					date:date
				}})
			}
		}
		,
		methods: {
			/* 解构 --前提名称要与抛出的一致 */
			...timeFormats,
			// 返回上一页
			onClickLeft() {
				this.$router.go(-1)
			},
			// 点击图片 -- 跳转路由
			onSlide(i) {
				// 1、切换active图
				this.swindex = i
				this.bgRrl = this.filmSchedules[i].poster
				this.mySwiper.slideTo(this.swindex);
			},
			/* 跳转至电影详情 */
			goFilm(ids){
				this.$router.push({name:'film',params:{
					id:ids,
					rou:"cfilm"
				}})
			},
			// 时间标签选择事件
			tabsChange(name,title){
				/* 注意！！！ 绑定的内容类型，否则tar选择自动选择到第一个 */
				this.activeName = name ;
				// 跳转子路由
				//获取电影id
				let filmId = this.filmSchedules[this.swindex].filmId;
				// 跳转至影院排场子路由
				this.$router.replace({name:'cpfilm',params:{
					filmId:filmId,
					date:name
				}})
			}
		},
		mounted() {
			// 获取数据
			this.$axios.get('/cinemaInfo', {
				params: {
					cinemaId: this.$route.params.id
				}
			}).then(res => {
				this.items = res.cinema
			})
			// 获取排片信息
			this.$axios.get('/filmSchedule', {
				params: {
					cinemaId: this.$route.params.id
				}
			}).then(res => {
				this.filmSchedules = res.films
				let _this = this
				// 因为异步获取渲染视图还未渲染完成
				this.$nextTick(() => {
					//创建轮播图对象
					this.mySwiper = new Swiper('.swiper-container', {
						slidesPerView: 4,
						spaceBetween: 20,
						centeredSlides: true,
						preventClicksPropagation: false,
						on: {
							// 滑动事件
							slideChangeTransitionStart: function() {
								// 改变位置下标
								_this.swindex = this.activeIndex;
								//改变背景下标
								_this.bgRrl = _this.filmSchedules[_this.swindex].poster;
								
									
								// 判断是否下标改变，如果改变才变化-轮播图默认选择第一个时间
								// 1、切换轮播图默认选择第一个时间
								if(_this.filmSchedules[_this.swindex].filmId!=_this.$route.params.filmId){
									_this.activeName=_this.filmSchedules[_this.swindex].showDate[0];
								}
								// 2、改变路由
								_this.$router.replace({name:'cpfilm',params:{
									filmId: _this.$route.params.filmId, 
									date: _this.activeName 
								}})
								
							},
							//Swiper初始化了
							init: function(swiper) {
								_this.bgRrl = _this.filmSchedules[_this.swindex].poster;
							}

						}
					});
					// 开局判断是否是刷新网页 如果是就改变轮播图下标因为已经监听了下标，
					if(this.filmSchedules.length!=0){
						// 获取路由
						let filmId = this.$route.params.filmId; //电影id
						this.activeName = Number( this.$route.params.date)
						// 遍历排片数据对比路由
						for (let i = 0; i < this.filmSchedules.length; i++) {
							if(this.filmSchedules[i].filmId==filmId){
								// 更改下标 触发监听改变轮播图数据
								this.swindex = i;
								break
							}
						}
					}
				})
			})
		}
	};
</script>

<style lang="scss" scoped="scoped">
	.cfilm {

		/* 标题 */
		.cf-title {
			text-align: center;
			font-size: 17px;
			color: #191a1b;
			overflow: hidden;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			background: #fff;
			top: 0;
			height: 44px;
			line-height: 44px;
			z-index: 302;
		}

		/* 标签栏 */
		.cf-tars {
			padding: 5px 0 15px;

			span {
				font-size: 10px;
				color: orange;
				padding: 1px 3px;
				border: 1px solid orange;
				margin: 0 3px;
			}

			span:last-child {
				border: none;
			}
		}

		/* 地址 */
		.cf-address {
			display: flex;
			height: 50px;
			align-items: center;
			justify-content: space-around;

			.iconfont {
				font-size: 19px;
			}

			/* 地址 */
			.cfress {
				text-align: left;
				font-size: 14px;
				height: 20px;
				flex: 1;
				color: #191a1b;
				overflow: hidden;
				padding-left: 17px;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			// 电话
			.cfphone {
				padding: 0 25px;
			}
		}

		/* 轮播图 */
		.cf-swiper {
			height: 160px;
			padding: 15px 0;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;

			// 模糊图背景
			.bg {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				filter: blur(30px);
				-webkit-filter: blur(30px);
				background: url('https://pic.maizuo.com/usr/movie/46015aa8e08a661e7c559b6e7407ce08.jpg');

			}

			.swiper-container {
				width: 100%;
				height: 100%;

				.swiper-slide {
					img {
						width: 100%;
						height: 100%;
					}

					text-align: center;
					font-size: 18px;
					background: #00ffff;
					width: 69px;
					/* Center slide text vertically */
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					-webkit-justify-content: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					-webkit-align-items: center;
					align-items: center;
					transition: 300ms;
					transform: scale(0.8);
				}

				.swiper-slide-active,
				.swiper-slide-duplicate-active {
					transform: scale(1);
				}
			}


		}
		
		/*  电影详情*/
		.film-into{
			padding: 15px 10px;
			display: flex;
			justify-content: space-around;
			/* 左边电影介绍  */
			.fi-left{
				.fil-type{
					font-size: 12px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					box-sizing: border-box;
					width: 300px;
				}
			}
			/*  右边跳转电影详情*/
			.fir-film{
				text-align: center;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
